<template>
  <div class="staff-manage">
    <!-- <div class="top-add">
      <el-button size="small" icon="el-icon-plus" type="primary" @click="addStorearea">添加库区</el-button>
      
    </div> -->

    <el-row :gutter="16">

      <el-col :xs="24" :sm="16" :md="12" :lg="7" :xl="7">
          <div class="tree-store">
                <div class="store-category">
                    <!-- 一级分类 -->
                    <div class="first-category" @click="checkStore()">
                        <i :class="[opentwoindex? 'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                        <span class="category-name">{{main_store}}</span>
                    </div>
                    <!-- 二级分类 -->
                    <transition  name="areawrap">
                      <ul v-if="opentwoindex">
                          <li v-for="areaItem in store_area" :key="areaItem.id">
                              <i @click="openArea(areaItem.areaId)" :class="[activeArea.indexOf(areaItem.areaId) != -1? 'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                              <span @click="openArea(areaItem.areaId)" class="category-name">{{areaItem.areaName}}</span>
                              <span>
                                <el-button style="margin-left:30px;height:24px;line-height:0px;border:0" 
                                  size="mini" icon="el-icon-plus" @click="addAreadepart(areaItem.areaId)"
                                  v-if="activeArea.indexOf(areaItem.areaId) != -1">
                                  添加库位
                                </el-button>
                              </span>
        
                              <ul v-if="activeArea.indexOf(areaItem.areaId) != -1">
                                  <li v-for="item in areaItem.departments" :key="item.departmentId" 
                                    @mouseover="viewBtn(item)" @mouseleave="unviewbtn">
                                      <span style="margin-left:-10px" class="depart-name" @click="selectDepart(item,areaItem.areaId)">{{item.departmentCode}}</span>
                                      <div v-if="viewbtnvis == item.departmentId" class="depart-btn">
                                        <el-button size="mini" icon="el-icon-edit" @click="editDepart(item)">修改</el-button>
                                        <el-button size="mini" icon="el-icon-delete" @click="delDepart(item)">删除</el-button>
                                      </div>
                                  </li>
                              </ul>
                          </li>
                      </ul>
                    </transition>
                    <!-- <el-tree :data="test" node-key="id" default-expand-all icon-class="el-icon-arrow-right" :expand-on-click-node="false">
                      <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                          <el-button v-if="node.children" type="text" size="mini" @click="() => editDepart(data)">
                            修改
                          </el-button>
                          <el-button type="text" size="mini" @click="() => delDepart(node, data)">
                            删除
                          </el-button>
                        </span>
                      </span>
                    </el-tree> -->
                    <!-- 库位分类 -->
                    
                </div>
          </div>
          
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17" v-loading="Loading">
        <el-button size="mini" style="margin-bottom:20px" icon="el-icon-plus" type="primary" @click="addStorearea">添加库区</el-button>
        <el-table v-if="checked_store" :data="store_area" border style="width: 100%">
          <el-table-column prop="areaNumber" label="库区编号" ></el-table-column>
          <el-table-column prop="areaName" label="库区名称" ></el-table-column>
          <el-table-column prop="areaRemarks" label="备注"></el-table-column>
          <el-table-column label="操作" width="250">
            <template v-if="checked_store" slot-scope="scope">
              <el-button size="mini" icon="el-icon-edit" @click="updateArea(scope.row)">修改</el-button>
              <el-button size="mini" icon="el-icon-delete" @click="deleteArea(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 点击库位展示库存 -->
        <el-table v-if="!checked_store" :data="stockProds" border style="width: 100%">
          <el-table-column prop="prodCode" label="装备编号"></el-table-column>
          <el-table-column prop="prodName" label="装备名称"></el-table-column>
          <el-table-column prop="prodSpecial" label="规格"></el-table-column>
          <el-table-column prop="prodStocknum" label="库存数"></el-table-column>
          <el-table-column prop="emit" label="单位"></el-table-column>
        </el-table>
      </el-col>

    </el-row>

    <addarea :addareadialog.sync="addareadialog"></addarea>
    <updatearea :checkArea="checkArea" :updateareadialog.sync="updateareadialog"></updatearea>
    <updatedepart :checkDepart="checkDepart" :updateDepartdialog.sync="updateDepartdialog"></updatedepart>
    <adddepart :area_id="area_id" :areaList="areaList" :addDepartDialog.sync="addDepartDialog"></adddepart>
  </div>
</template>

<script>
import { UpdateStore, GetStore, GetAreaDepart, UpdateArea,DelStore, FindStoreArea, FindAreaDepart, DelStoreArea, DelDepart, GetDepartStock } from '@/api/store.js';
import addarea from './addarea';
import updatearea from './updatearea';
import adddepart from './adddepart';
import updatedepart from '@/views/store/updatedepart';
import { getStore } from '@/utils/app.js'
export default {
  name: 'storemanage',
  components: {
    addarea,
    updatearea,
    adddepart,
    updatedepart
  },
  data() {
    return {
        Loading: true,     // 仓库右边加载
        is_addarea: true,      // 是否是显示库区时
        activeArea: [],       // 激活的库区
        opentwoindex: true,
        addareadialog: false,     // 打开添加库区
        updateareadialog: false,
        addDepartDialog: false, // 打开添加库位
        updateDepartdialog: false,
        checked_store: true,
        checkArea: {}, // 选择库区进行修改
        checkDepart: {}, // 选择库位进行修改
        viewbtnvis: null, // 库位按钮可见
        chose_areaid: null,
        areaList: [],
        test: [
          {id:1,label:123,children:[{id:1,label:123}]},
          {id:2,label:456},
          {id:3,label:798},
        ],
        locatelist: [],
        area_id: null,
        store_area: [],
        propsObj: {
          label: "areaName"
        },
        stockProds: []
    }
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
  },
  watch: {
    storeid(newVal) {
      if (newVal) {
        this.getStoreArea();
        this.checked_store = true;
      }
    },
    addareadialog(newVal) {
      if (!newVal) {
        setTimeout(() => {
          this.getStoreArea()
        },500)
        
      }
    },
    updateareadialog(newVal) {
      if (!newVal) {
        this.getStoreArea()
      }
    },
    addDepartDialog(newVal) {
      if (!newVal) {
        this.getStoreArea()
      }
    },
    updateDepartdialog(newVal) {
      if (!newVal) {
        this.openArea(this.chose_areaid)
      }
    },
  },
  mounted() {
    this.getStoreArea()
  },
  methods: {
    // 获取页面仓库和库区
    getStoreArea() {
      GetAreaDepart(this.storeid).then( res => {
          this.store_area = res.data;
          this.areaList = res.data;
          this.Loading = false;

      })
    },
    // 删除库区
    deleteArea(item) {
      let areaId = item.areaId;
      DelStoreArea(areaId).then( res => {
        let data = res.data
        this.$message({
            message: data.msg,
            type: 'success'
        })
        this.getStoreArea()
      })
      
    },
    
    // 选择库位展示
    selectDepart(item,areaId) {
        this.checked_store = false;
        this.Loading = true;
        let reqData = {
          prodDepart: item.departmentId,
          prodArea: areaId,
          warehouseId: this.storeid
        }
        GetDepartStock(reqData).then( res => {
          this.stockProds = res.data
          this.Loading = false;
        })
    },
    checkStore() {
        this.opentwoindex = !this.opentwoindex;
        this.checked_store = true;
        this.is_addarea = true;
        // this.arealist = store.store_area;
    },
    // 打开库区库位
    openArea(id) {
      if(this.activeArea.indexOf(id) != -1) {
        this.activeArea.splice(this.activeArea.indexOf(id),1)
      } else {
        this.activeArea.push(id);
      }
        // this.checked_store = false;
        // this.is_addarea = false;

        // // 根据库区id加载库位数据
        // FindAreaDepart(id).then( res => {
        //   this.locatelist = res.data;
        // })
        
    },
    // 点击打开库区弹框
    addStorearea() {
      this.addareadialog = true;
    },
    // 点击打开库位弹框
    addAreadepart(id) {
      this.addDepartDialog = true;
      this.area_id = id;
    },
    updateArea(data) {
      this.checkArea = data;
      // console.log(this.checkArea)
      this.updateareadialog = true;
    },
    viewBtn(item) {
      this.viewbtnvis = item.departmentId;
    },
    unviewbtn() {
      this.viewbtnvis = ''
    },
    editDepart(item) {
      this.checkDepart = item;
      this.chose_areaid = item.areaId;
      this.updateDepartdialog = true;
    },
    delDepart(item) {
      let departmentId = item.departmentId;
      DelDepart(departmentId).then( res => {
        let data = res.data
        this.$message({
            message: data.msg,
            type: 'success'
        })
        this.openArea(item.areaId)
        this.getStoreArea()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  
  .staff-manage {
    width: 100%;
  }
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
  .tree-store {
      width: 100%;
      // min-height: 100vh;
      border-right: 1px dashed #e0e0e0;
      color: #606266;
  }
  .store-category {
    line-height: 30px;
    position: relative;
    cursor: pointer;
    &:first-child:before {
      top: 20px
    }
    &:last-child:before {
      bottom: 21px
    }
    &:before {
        content: '';
        position: absolute;
        left: 27px;
        top: 0;
        bottom: 0;
        width: 32px;
        // border-left: 1px dotted #000;
      }
    .first-category {
      line-height: 30px;
      padding-left: 20px;
      position: relative;
      i {
          color: #999;
          font-weight: 700;
      }
      
    }
    li {
      list-style: none;
      padding-left: 40px;
      font-size: 14px;
      position: relative;
      margin-left: 10px;
      // display: flex;
      // &:hover {
      //   .depart-btn {
      //     display: block;
      //   }
      // }
      &:before {
        content: '';
        position: absolute;
        left: 20px;
        top: 15px;
        width: 20px;
        // border-bottom: 1px dotted #000;
      }
      i {
          color: #999;
          font-weight: 700;
      }
    }
    // li,h4 {
    //   &:hover {
    //     background-color: #f3f3f3;
    //     .button-wrap {
    //       display: block;
    //     }
    //   }
    // }
  }
  .category-name {
      margin-left: 5px;
  }
  .category-name:hover {
      color: #409EFF;
  }
  .depart-name:hover {
    color: #409EFF;
  }
  .depart-btn {
    position: absolute;
    top: 0;
    right: 20px;
    button {
      height: 24px;
      line-height: 10px;
      border: 0;
    }
  }

  // .areawrap-enter-active,.areawrap-leave-active{
  //     transition: opacity 1s;
  // }
  // .areawrap-enter-active{
  //     animation: bounce-in 1s;
  // }
  // .areawrap-leave-active{
  //     animation: bounce-in 1s reverse;
  // }
  // @keyframes bounce-in {
  //     10%{
  //         transform: translateY(-100%);
  //     }
  //     50%{
  //         transform: translateY(-50%);
  //     }
  //     100%{
  //         transform: translateY(0%);
  //     }
  // }

</style>